<template>
  <div id="shopCart">
    <HeaderTop :title="title">
      <router-link to="/" class="header_left" slot="left">
        <i class="iconfont icon-arrow-left"></i>
      </router-link>
      <router-link to="" class="header_right" slot="right">
        <i class="iconfont icon-three-dot"></i>
      </router-link>
    </HeaderTop>
    <div class="main" ref="main">
      <div class="goodsList" v-if="userInfo._id">
        <div v-if="goodsList.length">
           <!-- 列表区域 -->
           <div class="card-list">
             <div class="card-item" v-for="(item, index) in goodsList" :key="index">
               <div class="card-switch">
                 <div class="switch">
                   <mt-switch
                     v-model="goodsSelected[item.id]"
                     @change="selectedChanged(item.id, goodsSelected[item.id])"></mt-switch>
                 </div>
               </div>
               <div class="info">
                 <div class="img">
                   <img :src="item.pic" alt="">
                 </div>
                 <div class="control">
                   <span class="title">{{ item.title }}</span>
                   <span class="price">￥{{ item.price }}</span>
                   <div class="num-box">
                     <NumBox :initCount="goodsCount[item.id]" :goodsId="item.id" :max="item.inventory_count" />
                   </div>
                   <span class="iconfont icon-delete" @click="remove(item.id, index)"></span>
                 </div>
               </div>
             </div>
           </div>
           <!-- 结算区域 -->
           <div class="settle-accounts">
             <div class="inner">
               <div class="left">
                 <p class="txt">总计 (不含运费)</p>
                 <p class="total-count">已勾选商品
                   <span class="red">{{ goodsCountAndAmount.count }}</span> 件, 总价
                   <span class="red">￥{{ goodsCountAndAmount.amount }}</span></p>
               </div>
               <div class="right">
                 <mt-button type="danger">去结算</mt-button>
               </div>
             </div>
           </div>
         </div>
        <div class="no-goodsList" v-else>
          <img class="shopCart-icon" src="./shopCart-icon.png">
          <p class="content">购物车空空如也, 去逛逛吧~</p>
        </div>
      </div>
      <div class="empty_wrap" v-else="!userInfo._id">
        <img class="shopCart-icon" src="./shopCart-icon.png">
        <p class="content">登录后可查看购物车中商品</p>
        <router-link to="/login" class="login">登录</router-link>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapState, mapGetters } from 'vuex'
  import BScroll from 'better-scroll'
  import { MessageBox, Toast } from 'mint-ui'
  import HeaderTop from '../../components/HeaderTop/HeaderTop'
  import NumBox from '../../components/ShopCartNumBox/ShopCarNumBox'
  export default {
    data() {
      return {
        title: '购物车'
      }
    },
    created () {
      this.$nextTick(() => {
        this.setMainHeight()
      })
    },
    mounted () {
      let ids = this.goodsCartIds.join(',')
      this.$store.dispatch('getCartGoods', ids)
      this.$nextTick(() => {
        this._initBScrollMain()
      })
    },
    computed: {
      ...mapState(['userInfo', 'goodsList']),
      ...mapGetters([ 'goodsCountAndAmount', 'goodsCartIds', 'goodsCount', 'goodsSelected'])
    },
    methods: {
      // 动态设置main高度
      setMainHeight () {
        const main = this.$refs.main
        const docH = document.documentElement.clientHeight
        main.style.height = docH - 94 + 'px'
      },
      // 初始化滚动
      _initBScrollMain () {
        new BScroll('.main', {
          scrollY: true, // Y轴滚动
          scrollBar: true, // 滚动条
          bounce: false, // 禁用回弹
          probeType: 2
        })
      },
      // 点击删除对应商品
      remove (id, index) {
        MessageBox.confirm('确定要删除吗?').then(
          action => {
            // 删除成功
            Toast('删除成功')
            this.$store.dispatch('removeGoodsList', index)
            this.$store.dispatch('removeCartGoods', id)
          },
          action => {
            console.log('取消删除')
          }
        )

      },
      selectedChanged (id, val) {
        // 点击开关时, 把最新的val同步到store中
        console.log(id, '-----', val)
        this.$store.dispatch('updateCartGoodsSelected', {id, val})
      }
    },
    components: {
      HeaderTop,
      NumBox
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/mixins.styl";
  #shopCart
    absolute()
    bg(#fff)
    overflow hidden
    .header
      bottom-border-1px(#eee)
    .main
      width 100%
      .goodsList
        min-width 375px
        .card-list
          top-border-1px(#dcdcdc)
          width 100%
          margin-top 10px
          &.v-enter, &.v-leave-to
            opacity 0
            transform translateY(30px)
          &.v-enter-active
            transitioin all 1s
          &.v-leave-active
            transform all 1s
          .card-item
            size(100%, 92px)
            position relative
            bottom-border-1px(#dcdcdc)
            .card-switch
              size(70px, 100%)
              fl()
              .switch
                position absolute
                top 50%
                left 8px
                transform translateY(-50%)
            .info
              border-box()
              padding 9px 0 9px 70px
              .img
                size(72px, 72px)
                img
                  size(100%, 100%)
              .title
                color(#333)
                fz(14px)
                border-box()
                overflow hidden
                text-overflow ellipsis
                display -webkit-box
                -webkit-box-orient vertical
                -webkit-line-clamp 2
                padding-left 10px
                padding-right 30px
                position absolute
                top 8px
                left 150px
              .price
                color(#ff4949)
                fz(16px)
                font-weight 400
                position absolute
                bottom 20px
                left 150px
              .num-box
                position absolute
                right 12px
                bottom 9px
              .icon-delete
                fz(18px)
                color(#616161)
                position absolute
                right 5px
                top 8px

        .settle-accounts
          .inner
            size(100%, 92px)
            border-box()
            bottom-border-1px(#dcdcdc)
            padding 10px
            position relative
            margin-top 30px
            .left
              width 260px
              margin-top 10px
              overflow hidden
              fl()
              .txt
                color(#333)
                line-height 20px
              .total-count
                color(#333)
                .red
                  color(#f20)
                  fz(16px)
                  font-weight bold
            .right
              fr()
              margin-top 14px
      .empty_wrap,
      .no-goodsList
        flex-auto()
        transform translateY(50%)
        margin-top 44px
        .shopCart-icon
          size(90px, 90px)
        .content
          fz(16px)
          color(rgba(51,51,51,.66))
          lh(24px)
          margin: 11px 0;
        .login
          size(60px, 30px)
          color(#e93b3d)
          center-text()
          lh(30px)
          fz(14px)
          border-radius 4px
          border 1px solid #e93b3d
</style>
